<!--
 * @Description: css闪烁
 * @Author: wang_k
 * @Date: 2023-05-31 11:17:46
 * @LastEditTime: 2023-06-08 14:01:29
 * @FilePath: /demo_important/src/views/Flicker/index.vue
-->
 <template>
  <div>
    <el-badge
      :value="number"
      class="item"
      :class="number > 0 ? 'flash' : ''"
      :hidden="number == 0"
    >
      <el-button size="small">评论</el-button>
    </el-badge>
    <div class="myfirst"></div>
    <div class="font-color">文字渐变</div>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      number: 0,
    }
  },
}
</script>

<style scoped>
/*闪烁动画*/
/* @keyframes twinkle {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.flash /deep/ .el-badge__content {
  animation: twinkle 2s;
  animation-iteration-count: infinite;
} */
.myfirst {
  width: 100px;
  height: 100px;
  background: red;
  animation: myfirst 5s;
  animation-iteration-count: infinite; /* 一直执行 */
  -moz-animation: myfirst 5s; /* Firefox */
  -webkit-animation: myfirst 5s infinite; /* Safari and Chrome */
  -o-animation: myfirst 5s; /* Opera */
}

@keyframes myfirst {
  0% {
    background: red;
  }
  25% {
    background: yellow;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

@-moz-keyframes myfirst /* Firefox */ {
  0% {
    background: red;
  }
  25% {
    background: yellow;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
  0% {
    background: red;
  }
  25% {
    background: yellow;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

@-o-keyframes myfirst /* Opera */ {
  0% {
    background: red;
  }
  25% {
    background: yellow;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}
.font-color {
  background-image: -webkit-linear-gradient(bottom,#82BBFF, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>


